<!-- 主题色切换组件 -->
<template>
  <!-- 这里的$attrs拿到的就是父组件中绑定的属性 比如calss name等 谁用到这个组件绑定的属性就是谁 
    这里Layout中的Navbar用到了这个组件  <theme-select class="right-menu-item hover-effect"></theme-select> 
    那么这里的attrs绑定的就是这些calss属性 这样Navbar设置的样式在这里才会生效
  -->
  <el-dropdown v-bind="$attrs" trigger="click" class="theme" @command="handleSetTheme">
    <!-- 图标 -->
    <div>
      <el-tooltip :content="$t('msg.navBar.themeChange')">
        <span id="guide-theme" class="icon iconfont icon-zhuti"></span>
      </el-tooltip>
    </div>
    <!-- menu -->
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="color">
          {{$t('msg.theme.themeColorChange')}}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <!-- 弹出层 -->
  <div>
    <select-color v-model="selectColorDialog"></select-color>
  </div>
</template>
<script setup>
import { ref} from 'vue'
//导入取色器组件
import SelectColor from './components/SelectColor.vue'

//点击下拉dropdown组件时候 打开弹窗
const handleSetTheme = (command) => {
  selectColorDialog.value = true
}

// dialog 取色器组件的弹框显示
const selectColorDialog = ref(false)

</script>


<style lang='scss' scoped>
.icon{
  font-size: 28px;
}
</style>